<template>
  <div class="dashboard">
    <el-container>
      <el-header class="header">
        <div class="brand">
          <el-button
            class="menu-toggle"
            size="small"
            :icon="MenuIcon"
            circle
            @click="showMenu = true"
          />
          <img :src="LOGO_URL" class="logo" alt="logo" />
          <div class="titles">
            <h1>旅拍网后台管理</h1>
            <p>数据一览与快速操作</p>
          </div>
        </div>
        <div class="profile">
          <el-avatar :size="36" :src="userInfo.avatarUrl">A</el-avatar>
          <span class="nickname">{{ userInfo.nickname }}</span>
          <el-divider direction="vertical" />
          <el-button size="small" type="info" plain @click="logout">退出登录</el-button>
        </div>
      </el-header>

      <!-- 小屏抽屉菜单 -->
      <el-drawer v-model="showMenu" title="导航菜单" direction="ltr" size="70%" :with-header="true">
        <el-menu :default-active="menuId" class="side-menu" @select="selectActive">
          <div v-for="item in menuNavData" :key="item.id">
            <router-link class="menu-link" :to="{ path: item.router }">
              <el-menu-item :index="item.id">
                <el-icon><component :is="item.icon" /></el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>
            </router-link>
          </div>
        </el-menu>
        <div class="donation-card" v-if="TIP_QRCODE_URL || CONTACT_INFO">
          <div class="donation-title">{{ DONATION_TITLE }}</div>
          <div class="donation-desc">{{ DONATION_DESC }}</div>
          <img v-if="TIP_QRCODE_URL" :src="TIP_QRCODE_URL" alt="打赏二维码" class="donation-img" />
          <div class="donation-text" v-if="CONTACT_INFO">联系我：{{ CONTACT_INFO }}</div>
        </div>
      </el-drawer>

      <el-container class="row">
        <!-- 大于等于断点时显示侧栏；小屏改用抽屉 -->
        <el-aside v-if="!isMobile" class="aside col-6 col-sm-3 col-md-2">
          <el-menu :default-active="menuId" class="side-menu" @select="selectActive">
            <div v-for="item in menuNavData" :key="item.id">
              <router-link class="menu-link" :to="{ path: item.router }">
                <el-menu-item :index="item.id">
                  <el-icon><component :is="item.icon" /></el-icon>
                  <span>{{ item.title }}</span>
                </el-menu-item>
              </router-link>
            </div>
          </el-menu>
          <div class="donation-card" v-if="TIP_QRCODE_URL || CONTACT_INFO">
            <div class="donation-title">{{ DONATION_TITLE }}</div>
            <div class="donation-desc">{{ DONATION_DESC }}</div>
            <img
              v-if="TIP_QRCODE_URL"
              :src="TIP_QRCODE_URL"
              alt="打赏二维码"
              class="donation-img"
            />
            <div class="donation-text" v-if="CONTACT_INFO">联系我：{{ CONTACT_INFO }}</div>
          </div>
        </el-aside>

        <el-main class="main col-12 col-sm-9 col-md-10">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from 'vue'
import { useUserStore, useMenuIdStore } from '@/stores'
import {
  Star,
  Pointer,
  Files,
  User,
  DataAnalysis,
  Setting,
  Menu as MenuIcon,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import emitter from '@/utils/event'
const router = useRouter()
const userStore = useUserStore()
const LOGO_URL = ref('')
const TIP_QRCODE_URL = ref('')
const CONTACT_INFO = ref('')
const DONATION_TITLE = ref('支持作者')
const DONATION_DESC = ref('如果本项目对你有帮助，欢迎打赏支持，您的鼓励是我持续优化的动力！')
const userInfo = ref({
  avatarUrl: '',
  nickname: '',
})
const menuId = ref('1')
const arrAy = [
  {
    id: '1',
    icon: Star,
    title: '每日推荐',
    router: 'index',
    Subclass: [], //是否有二级三级等等菜单
  },
  {
    id: '2',
    icon: Pointer,
    title: '推荐游记',
    router: 'reco-travel',
    Subclass: [],
  },
  {
    id: '3',
    icon: Files,
    title: '游记管理',
    router: 'travel-manag',
    Subclass: [],
  },
  {
    id: '4',
    icon: User,
    title: '用户管理',
    router: 'user-manag',
    Subclass: [],
  },
  {
    id: '5',
    icon: DataAnalysis,
    title: '数据分析',
    router: 'analysis',
    Subclass: [],
  },
  {
    id: '6',
    icon: Setting,
    title: '后台设置',
    router: 'back-setting',
    Subclass: [],
  },
]

// 响应式：小屏使用抽屉
const isMobile = ref(false)
const showMenu = ref(false)
const updateIsMobile = () => {
  isMobile.value = window.innerWidth < 576
}

// 退出登录
const logout = () => {
  userStore.removeUserInfo()
  router.push('/login')
}
// 修改管理员信息触发
emitter.on('upload-Admin-Success', () => {
  adminInfor()
})

const menuNavData = shallowRef(arrAy)

const selectActive = (index: string) => {
  menuId.value = index
  useMenuIdStore().setMenuId(index)
  if (isMobile.value) {
    showMenu.value = false
  }
}

function adminInfor() {
  if (userStore.userInfo) {
    const { avatarUrl, nickname } = userStore.userInfo
    userInfo.value.avatarUrl = avatarUrl
    userInfo.value.nickname = nickname
  }
}

onMounted(() => {
  LOGO_URL.value = import.meta.env.VITE_API_LOGO_URL || ''
  TIP_QRCODE_URL.value = import.meta.env.VITE_TIP_QRCODE_URL || ''
  CONTACT_INFO.value = import.meta.env.VITE_CONTACT_INFO || ''
  DONATION_TITLE.value = import.meta.env.VITE_DONATION_TITLE || '支持作者'
  DONATION_DESC.value =
    import.meta.env.VITE_DONATION_DESC ||
    '如果本项目对你有帮助，欢迎打赏支持，您的鼓励是我持续优化的动力！'
  menuId.value = useMenuIdStore().menuId || '1'
  adminInfor()
  updateIsMobile()
  window.addEventListener('resize', updateIsMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateIsMobile)
})
</script>

<style scoped>
/* 旅游主题配色（作用于本页） */
.dashboard {
  --brand-primary: #42b883; /* 热带绿 */
  --brand-secondary: #34b3e3; /* 海蓝 */
  --bg-0: #f6fbff; /* 主背景 */
  --bg-1: #ffffff; /* 卡片/容器背景 */
  --border: #e6eef5; /* 边框 */
  --text: #1f2937; /* 文字深色 */
  --muted: #6b7280; /* 次要文字 */
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}

.dashboard {
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(52, 179, 227, 0.08), transparent 60%),
    radial-gradient(760px 360px at -10% 30%, rgba(66, 184, 131, 0.08), transparent 60%), var(--bg-0);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(66, 184, 131, 0.12), rgba(52, 179, 227, 0.12));
  border-bottom: 1px solid var(--border);
  height: 66px;
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(66, 184, 131, 0.28);
}
.titles h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.titles p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.profile {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.nickname {
  font-weight: 600;
}

/* 小屏显示菜单按钮；大屏隐藏 */
.menu-toggle {
  display: none;
}
@media (max-width: 575.98px) {
  .menu-toggle {
    display: inline-flex;
  }
}

/* 让内容容器填满剩余视口高度，并让单行网格占满容器 */
.el-container.row {
  flex: 1;
  min-height: calc(100vh - 66px);
  grid-auto-rows: 1fr;
}

.aside {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.menu-link {
  text-decoration: none;
}
/* 菜单交互优化：更清晰的悬停与选中态 */
.side-menu :deep(.el-menu-item) {
  height: 44px;
  border-radius: 10px;
  margin: 6px 10px;
  color: var(--text);
}
.side-menu :deep(.el-menu-item:hover) {
  background: rgba(66, 184, 131, 0.09);
}
.side-menu :deep(.el-menu-item.is-active),
.side-menu :deep(.is-active) {
  background: linear-gradient(135deg, rgba(66, 184, 131, 0.18), rgba(52, 179, 227, 0.16));
  color: var(--text);
  border-left: 3px solid var(--brand-primary);
}
.side-menu :deep(.el-sub-menu__title:hover) {
  background: rgba(52, 179, 227, 0.08);
}

/* 打赏二维码模块 */
.donation-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 10px;
  box-shadow: var(--shadow);
  text-align: center;
}
.donation-title {
  font-weight: 700;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 4px;
}
.donation-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.donation-img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 8px;
  border-radius: 8px;
}
.donation-text {
  font-size: 12px;
  color: var(--muted);
}

.main {
  padding: 16px 16px 28px;
  background: transparent;
}

/* 卡片/面板风格（保留原有结构，统一主题风格） */
.stats {
  margin-top: 4px;
  margin-bottom: 10px;
}
.stat-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: linear-gradient(135deg, rgba(66, 184, 131, 0.12), rgba(52, 179, 227, 0.12));
}
.label {
  font-size: 13px;
}
.value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.trend {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trend span {
  font-size: 12px;
  font-weight: 700;
}
.trend .up {
  color: #22c55e;
}
.trend .down {
  color: #ef4444;
}

.panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}
.panel-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 576px) {
  .dashboard {
    min-height: 100vh;
    background:
      radial-gradient(740px 320px at 100% -10%, rgba(52, 179, 227, 0.08), transparent 60%),
      var(--bg-0);
  }
  .titles {
    display: none;
  }
  .nickname {
    display: none;
  }
}
</style>
